<template>
    <div class="source">
        <!-- 系列条款弹窗 -->
        <el-dialog title="产品条款复制" :visible.sync="dialogVisible" width="65%" :close-on-click-modal="false">
            <div>
                <div>
                    <table>
                    <tr>
                        <td>产品类型：</td>
                        <td>
                            <el-select v-model="clauseForFund.fundType" placeholder="请选择" size="mini" @change="changeClauseType">
                                <el-option
                                    v-for="item in FundTypes"
                                    :key="item.dictKey"
                                    :value="item.dictKey"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>所属产品：</td>
                        <td>
                            <el-select v-model="clauseForFund.belongFund" placeholder="请选择" size="mini" filterable>
                                <el-option
                                    v-for="item in fundByFundTypeList"
                                    :key="item.dictKey"
                                    :value="item.dictKey"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-button size="mini" @click="getUnSelectClauseForFund('reset')">重置</el-button>
                            <el-button size="mini" type="primary" @click="getUnSelectClauseForFund('comfirm')">查询</el-button>
                        </td>
                    </tr>
                </table>
                </div>
                <div style="width:90%; display:flex; color:red;justify-content: space-around;margin: 3% auto 0">
                    <div style="width: 65%">系列产品条款</div>
                    <div style="width: 35%">{{treeNodeData.label}}</div>
                </div>
                <div class="transferFat">
                    <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder=""
                        v-model="transferValue"
                        :data="transferData"
                        @change="handleChange"
                        ref="myTransfer"
                    >
                    </el-transfer>    
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmQuery">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
@Component({
    name: 'SerialClauseDialog',
    components: {
        RiskIconButton,
        RiskTrantable,
    },
})
export default class SerialClauseDialog extends Vue {
    @Prop() serialClauseDialog;
    @Prop() treeNodeData;
    private dialogVisible: boolean = false;
    private FundTypes: any = []; // 产品类型下拉框
    fundByFundTypeList = []; // 所属产品下拉框
    transferValue = []; // 右侧key
    transferValueList = [];
    transferData = []; // 左侧+右侧，
    
    fundSourceCategoryData = [];
    clauseForFund = { // 查询条件
        fundType: '',
        belongFund: '',
    };
    @Watch('serialClauseDialog')
    async watchSerialClauseDialog(val) {
        console.log('treeNodeData', this.treeNodeData)
        this.dialogVisible = val;
        if (val == true) {
            this.$nextTick(() => {
                const $myTrans = this.$refs.myTransfer as any;
                console.log($myTrans, '$myTrans');
                if ($myTrans) {
                    $myTrans.$children[0].query = '';
                    $myTrans.$children[3].query = '';
                }
            });
            this.FundTypes = [];
            this.FundTypes = await SGU_CACHE('FundType', '/dict/list/code/Y_000002', []);
            this.getSelectClauseForFund();
        } else {
            this.clauseForFund = { // 查询条件
                fundType: '',
                belongFund: '',
            };
            this.transferValue = []; // 右侧key
            this.transferValueList = [];
            this.transferData = []; // 左侧+右侧，
            this.fundByFundTypeList = [];
            this.FundTypes = [];
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitSerialClauseDialog', false)
        }
    }
    changeClauseType(param) {
        this.clauseForFund.belongFund = '';
        this.getFundByFundType(param)
    }
    // 根据产品类型获取产品
    getFundByFundType(dictKey) {
        this.$axios.post('/indexClause/getFundByFundType', {
            dictKey: dictKey
        }).then((res: any) => {
            this.fundByFundTypeList = []
            res.forEach(item => this.fundByFundTypeList.push(item))
        }); 
    }
    // 获取产品选择的条款
    getSelectClauseForFund() {
        this.$axios.post('/indexClause/getSelectClauseForFund', {
            belongFund: this.treeNodeData.fundCode
        }).then((res: any) => {
            this.transferValueList = [];
            this.transferValue = [];
            this.transferData = [];
            res.forEach(item => {
                this.transferValueList.push({
                    label: item.dictKeyName,
                    key: item.dictKey
                })
                this.transferValue.push(item.dictKey)
            });
            res.forEach(item => {
                this.transferData.push({
                    label: item.dictKeyName,
                    key: item.dictKey,
                    disabled: true
                })
            });
        }); 
    }
    // 获取产品未选择的条款
    getUnSelectClauseForFund(param) {
        if (param == 'comfirm') {
            // if (this.clauseForFund.belongFund == this.treeNodeData.fundCode) {
            //     this.yh_message_warn('所选产品与当前一致');
            //     return
            // }
            this.$axios.post('/indexClause/getUnSelectClauseForFund', {
                belongFund: this.clauseForFund.belongFund,
                // excludeBelongFund: this.treeNodeData.fundCode,
            }).then((res: any) => {
                this.transferData = [];
                if (res) {
                    if (this.clauseForFund.belongFund == this.treeNodeData.fundCode) {
                        res.forEach(item => {
                            this.transferData.push({
                                label: item.dictKeyName,
                                key: item.dictKey + 'copy'
                            })
                        });  
                    } else {
                        res.forEach(item => {
                            this.transferData.push({
                                label: item.dictKeyName,
                                key: item.dictKey
                            })
                        });    
                    }
                    
                    if (this.transferValueList) {
                        this.transferValueList.forEach(item => {
                            this.transferData.push({
                                label: item.label,
                                key: item.key,
                                disabled: true
                            })
                        })    
                    } 
                }
            });    
        } else if (param == 'reset') {
            this.clauseForFund = { // 查询条件
                fundType: '',
                belongFund: '',
            };
        }
    }
    // 产品条款复制
    confirmQuery() {
        this.$axios.post('/indexClause/fundClauseCopy/' + this.treeNodeData.fundCode, this.transferValue).then((res: any) => {
            this.yh_message_success('复制成功！')
            this.dialogVisible = false;
        });
    }
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    }
    handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
    }
}
</script>
<style lang="scss" scoped>
.source {
    height: calc(98vh - 7px);
    background: #ffffff;
}
table {
    width: 100%;
}
.transferFat{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
/deep/ .el-transfer-panel .el-transfer-panel__header {
    display: none !important;
}
/deep/ .el-transfer-panel {
    width: 300px;
}
/deep/ .el-transfer__button{
    width: 55px !important;
    span {
        padding-right: 25px !important;
    }
}
/deep/ .el-transfer-panel__filter .el-input__inner {
    width: 270px !important;
    border-radius: 0px !important;
}
</style>
